<template>
  <div class="scroll">
    <div class="scroll-top">
      <span class="vertical"></span>
      <h3 class="scroll-title">{{scrollTitle}}</h3>
    </div>
    <scroll-view class="scroll-view" scroll-x="true">
      <div class="scroll-view-content" v-for="(item,index) in scrollList" :key="index" @click="callback(item)">
        <img :src="item.img_url">
        <div class="content-name">{{item.name}}</div>
      </div>
    </scroll-view>
  </div>
</template>

<script>
export default {
  props:{
    scrollTitle:{ type: String, default: ''},
    scrollList: { type: Array, default: [] },
    callback: { type: Function , default: ()=>{}}
  }
}
</script>
<style lang='stylus' scoped>
.scroll
  .scroll-top
    display flex
    background-color #fff
    padding 25rpx
    .vertical
      width 6rpx
      height 36rpx
      background-color black
    .scroll-title
      font-size 32rpx
      margin-left 14rpx
      font-weight 600
  .scroll-view
    height 220rpx
    padding 20rpx 0
    display flex
    white-space nowrap
    .scroll-view-content
      display inline-block
      width 300rpx
      height 180rpx
      background-color #fff
      margin-right 20rpx
      position relative
      img
        width 100%
        height 100%
      &:nth-child(1)
        margin-left 20rpx
      .content-name
        height 40rpx
        line-height 40rpx
        font-size 28rpx
        text-align center
</style>